<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--上边框栏-->
<div class="border-bar">
    <!--左边导航盒子-->
    <div class="tool-navbox">
        <div class="index-logo">
            <a href="index.html">
                <img src="images/logo.png">
                <img src="images/borderbar/neteasemusic.png" alt="">
            </a>
        </div>
        <!--前进后退盒子-->
        <div class="rb-box">
            <div class="rb-back"></div>
            <div class="rb-box-line"></div>
            <div class="rb-forward"></div>
        </div>
        <!--搜索框-->
        <div class="searchbar-box">
            <dl>
                <dt>
                    <!--搜索框-->
                    <input type="text" placeholder="搜索音乐，视频，歌词，电台">
                    <div class="btn-search"></div>
                </dt>
                <!--搜索框的容器-->
                <dd class="searchbar-recommend">
                    <div class="triangle-up"></div>
                    <p>寻梦环游记</p>
                    <p>这是一段文字</p>
                    <p>这是一段文字</p>
ewqe
                    <!--点击搜索框之后的内容-->
                    <!--<h5 class="searchbar-recommend-title">热门搜索</h5>-->
                    <!--<ul>-->
                        <!--<li>寻梦</li>-->
                        <!--<li></li>-->
                    <!--</ul>-->
                </dd>
            </dl>
        </div>
    </div>
    <!--右边功能菜单性盒子-->
    <div class="tool-menubox">
        <img src="photos/mine.jpg" class="head" alt="">
        <dl>
            <dt class="tool-nickname">字发多少教</dt>
            <!--搜索框的容器-->
            <dd >
                <div class="triangle-up"></div>


                <!--点击搜索框之后的内容-->
                <!--<h5 class="searchbar-recommend-title">热门搜索</h5>-->
                <!--<ul>-->
                <!--<li>寻梦</li>-->
                <!--<li></li>-->
                <!--</ul>-->
            </dd>
        </dl>
        <div class="btn-skin"></div>
        <div class="btn-message">
            <div class="message-no">1</div>
        </div>
        <div class="btn-set"></div>
        <div class="line"></div>
        <div class="btn-tomix"></div>
        <div class="btn-maxmal"></div>
        <div class="btn-minimal"></div>
        <div class="btn-close"></div>
    </div>
</div>
<!--左导航栏-->
<div class="left-nav scrollbar">
<h5 class="nav-title">推荐</h5>
    <ul>
        <li class="ico-nav ico-findmusic">发现音乐</li>
        <li class="ico-nav ico-privatefm">私人FM</li>
        <li class="ico-nav ico-mv">MV</li>
        <li class="ico-nav ico-friend">朋友 <div class="ico-bottle"></div></li>
    </ul>
<h5 class="nav-title">我的音乐</h5>
    <ul>
        <li class="ico-nav ico-localmusic" data="icotype-ico-localmusic">本地音乐</li>
        <li class="ico-nav ico-downmanage" data="icotype-ico-localmusic">下载管理</li>
        <li class="ico-nav ico-mycloud">我的音乐云盘</li>
        <li class="ico-nav ico-myradio">我的电台</li>
        <li class="ico-nav ico-mycollect">我的收藏</li>
    </ul>
<h5 class="nav-title cursor-p">创建的歌单 <i class="ico-addmusic"></i><i class="ico-closeList"></i></h5>
    <ul>
        <li class="ico-nav ico-mylove">我喜欢的音乐</li>
    </ul>
<h5 class="nav-title cursor-p">收藏的歌单<i class="ico-closeList"></i></h5>
    <ul>
        <!--<li class="ico-nav ico-musiclist">我自己创建的歌单</li>-->


    </ul>
</div>
<!--音乐小工具栏-->
<div class="music-info">
    <div class="fullscreen"></div>
    <img src="photos/3310629511436792.jpg" class="music-face">
    <div class="music-name-box">
        <p><span class="music-name">Here With You</span><i class="ico-love"></i></p>
        <p><span class="music-singer">Asher Book</span><i class="ico-share"></i></p>
    </div>
</div>
<!--右侧更换内容-->
<div class="content-box scrollbar">
    fsd
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>
    rewr<br>

</div>
<!--底部播放器-->
<div class="play-list-box ">
    <!--弹窗标题栏-->
    <div class="playlist-title">
        <div class="play-list-btn btn-active">播放列表</div>
        <div class="play-list-btn">历史记录</div>
        <div class="ico-close-toolbox"></div>
    </div>

    <!--弹窗工具栏-->
    <div class="box-tool">
        总 <span class="list-box-songnum">100</span>首
        收藏全部 清空</div>
    <!--弹窗列表-->
    <div class="list-item-box scrollbar">
        <table>

        </table>
    </div>
</div>
<!--播放列表弹窗-->
<div class="music-player">
    <div class="ico-prevmusic"></div>
    <div class="ico-play"></div>
    <div class="ico-nextmusic"></div>
    <div class="ico-lyirc"></div>
    <div class="play-statetime">00:43</div>
    <!--播放进度-->
    <div class="play-progress-box">
        <div class="play-bufferprogress"></div>
        <div class="play-progress"></div>
        <div class="play-stateposition"><div class="play-stateposition-bg"></div></div>
    </div>
    <div class="play-totaltime">02:59</div>
    <div class="ico-volume" data="0.5"></div>
    <!--音量进度-->
    <div class="volume-progress-box">
        <div class="volume-progress"></div>
        <div class="volume-stateposition"><div class="volume-stateposition-bg"></div></div>
    </div>
    <!--播放类型-->
    <div class="play-type" typeindex="0"></div>
    <!--播放列表-->
    <div class="paly-list">
        <span class="list-num">0</span>
    </div>
</div>
<div id="music-lrc-box">
    <iframe src="song_info.html" frameborder="0" scrolling="no"></iframe>
</div>


<script src="jquery/jquery-1.11.3.min.js"></script>
<script src="js/index.js"></script>
<script src="js/music-player.js"></script>
<audio style="display: none" id="player"></audio>
</body>
</html>